---
import CarouselImg from "./CarouselImg.astro";
import CarouselItem from "./CarouselItem.astro";
const { articleListExp } = Astro.props;
---

<th:block
  th:each={articleListExp}
>
  <CarouselItem>
    <CarouselImg
      imgSrc="${(imgs==null)?iul+rando+'.jpg':(imgPrefix+imgs[0])}"
      imgAlt="${article.articleTitle}"
      imgWith="imgs=${@commonTag.split(article.articleImg==null?'':article.articleImg)},rando=${#numbers.formatDecimal(T(java.lang.Math).floor(T(java.lang.Math).random()*10),1,0)},iul=@{/nice/static/images/thumbs/}"
    />
    <div
      class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
    >
      <h5
        class="mb-2 text-3xl font-bold text-gray-900 dark:text-white"
        th:text="${article.articleTitle}"
      >
        Work fast from anywhere
      </h5>
      <p
        class="mb-5 text-base text-gray-500 sm:text-lg dark:text-gray-400"
        th:text="${article.articleSummary}"
      >
        Stay up to date and move work forward with Flowbite on iOS & Android.
        Download the app today.
      </p>
      <div
        class="items-center space-y-4 sm:flex sm:space-y-0 sm:space-x-4 rtl:space-x-reverse"
      >
        <a
          th:href="${webConfig['oly.web.domain']+'/article/'+article.articleId}"
          th:title="${article.articleTitle}"
          class="w-full sm:w-auto bg-gray-800/20 hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300 text-white rounded-lg inline-flex items-center justify-center px-4 py-2.5 dark:bg-gray-700/20 dark:hover:bg-gray-600 dark:focus:ring-gray-700"
        >
          <svg
            class="me-3 w-7 h-7"
            aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
          >
            <path
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M8 8v8m0-8a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm0 8a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm8-8a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm0 0a4 4 0 0 1-4 4h-1a3 3 0 0 0-3 3"
            ></path>
          </svg>
          <div class="text-left rtl:text-right">
            <div class="mb-1 text-xs">点击这里</div>
            <div class="-mt-1 font-sans text-sm font-semibold">
              查看内容详情
            </div>
          </div>
        </a>
      </div>
    </div>
  </CarouselItem>
</th:block>
